<template>
  <!-- 雷达图 -->
  <div id="PieChart">
    <div ref="chart01" class="chart01"></div>
  </div>
</template>

<script>
export default {
  name: "PieChart",
  components: {},
  props: ["title"],
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawRadarChart();
  },

  methods: {
    drawRadarChart() {
      let that = this;
      let mychart = that.$echarts.init(that.$refs.chart01);
      let option = {
        color: ['#ff7372','#f5de5a', '#71c184'],
        title: {
          text: this.title,
          left: 'center',
          top: 'center',
          textStyle: {
              color: '#ffffff',
              fontWeight: 'bold',
              fontSize: "12px",
          }
      },
        series: [
          {
            name: "存量资产",
            type: "pie",
            radius: ["50%", "75%"],
            itemStyle: {
              borderRadius: 90,
              borderWidth: '4',
              borderColor: '#042852',
            },
            label: {
              formatter: '{d}',
            },
            labelLine: {
              show: true,
              length: 10,
            },
            data: [
              { value: 648, name: "预警" },
              { value: 735, name: "关注" },
              { value: 580, name: "正常" },
            ],
          },
        ],
      };
      mychart.setOption(option);
      //   窗口自适应
      setTimeout(() => {
        let resizeFn = function () {
          mychart.resize();
        };
        window.addEventListener("resize", resizeFn);
        this.$once("hook:beforeDestroy", () => {
          mychart.dispose();
          mychart = null;
          window.removeEventListener("resize", resizeFn);
        });
      }, 200);
    },
  },
};
</script>
<style lang='less' scoped>
#PieChart {
  width: 100%;
  height: 100%;
  .chart01 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
}
</style>